<template>
    <div class="flex">
        <div class="flex-left">
            <div class="live">
                <img src="../../assets/imgs/label_pirme.svg" v-if="meetingInfo.chargeFlag === 0"/>
                <p :class="{indent : meetingInfo.chargeFlag === 0}">{{meetingInfo.title}}</p>
            </div>
            <div class="other-info">
                <div class="float-ul">
                    <span class="icon-city"></span>
                    <p class="float-city">{{meetingInfo.location || '--'}}</p>
                </div>
                <p>
                    <span class="icon-time">{{meetingInfo.startTime | moment('YYYY-MM-DD H:mm')}}</span>
                    <img class="meeting-type" src="../../assets/imgs/label_live.svg" v-if="meetingInfo.type === 1 && meetingInfo.associationType  === 1"/>
                    <img class="meeting-type" src="../../assets/imgs/label_video.svg" v-if="meetingInfo.type === 2"/>
                </p>
            </div>
        </div>
        <div class="flex-right">
            <zoom-img class="zoom" :src="meetingInfo.url"></zoom-img>
            <!--<img :src="meetingInfo.url" alt=""/>-->
        </div>
        <div class="suspension" v-if="meetingInfo.livingState === 0">
            <img src="../../assets/imgs/icon_live_yg.svg"/><span class="suspension-title">直播预告</span>
        </div>
        <div class="suspension" v-if="meetingInfo.livingState === 1">
            <img src="../../assets/imgs/icon_live.svg"/><span class="suspension-title">直播中...</span>
        </div>
        <div class="suspension" v-if="meetingInfo.livingState === 2">
            <img src="../../assets/imgs/icon_trailnotice.svg"/><span class="suspension-title">直播回顾</span>
        </div>
    </div>
</template>

<script>
    import ZoomImg from '@/components/ZoomImg'

    export default {
        components:{
            ZoomImg
        },
        props: {
            meetingInfo: {
                type: Object,
                default: {}
            }
        }
    }
</script>

<style lang="scss" scoped>
    .flex {
        position: relative;
        display: flex;
        padding: 2.13vw 3.2vw;
        background: #fff;
        border-bottom: 1px solid #f4f4f4;
    }

    .flex-left {
        height: 25.87vw;
        flex: 1;
        .live {
            & > img {
                position: absolute;
                top: 3vw;
                width: 8.53vw;
                height: 4.8vw;
            }
            & > p {
                min-height: 13.87vw;
                font-size: 4vw;
                color: #171717;
                font-weight: bold;
                line-height: 6.93vw;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                line-clamp: 2;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                padding-right: 10px;
            }
            .indent {
                text-indent: 9.6vw;
            }
        }
        .other-info {
            font-size: 3.2vw;
            color: #666;
            padding-right: 15px;
            .float-ul {
                display: flex;
                height: 5.87vw;
                line-height: 5.87vw;
            }
            & > p {
                height: 22px;
                line-height: 22px;
            }
            .icon-city {
                flex: 0 0 18px;
                background: url('../../assets/imgs/location.svg') no-repeat 0 center;
                padding-left: 18px;
            }
            .float-city {
                flex: 1;
                width: 150px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .icon-time {
                background: url('../../assets/imgs/time.svg') no-repeat 0 center;
                padding-left: 18px;
            }
            .meeting-type{
                float: right;
                margin-top: 1.6vw;
            }
        }
    }

    .flex-right {
        height: 25.87vw;
        flex: 0 0 34vw;
        .zoom{
            border-radius: 3px;
        }
    }

    .suspension {
        width: 34vw;
        position: absolute;
        bottom: 2.13vw;
        right: 3.2vw;
        background: rgba(0, 0, 0, 0.4);
        line-height: 5.87vw;
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
        padding: 0 5px;
        z-index: 1;
        & > img {
            width: 2.67vw;
            height: 2.67vw;
            margin-right: 5px;
        }
        .suspension-title {
            font-size: 2.67vw;
            color: #fff;
        }
    }
</style>
